import React from 'react'
import { NavLink } from 'react-router-dom'
import chen from './img/chen.jpg';
// import './css/app.css'

function Header() {

	function changeColor() {
		var lis = document.getElementsByTagName('li');
		for (var i = 0; i < lis.length; i++) {
			// console.log(lis[i])
			lis[i].onclick = function () {
				for (var j = 0; j < lis.length; j++) {
					lis[j].style.borderLeft = '4px solid rgba(154, 192, 250,0)'
				}
				this.style.borderLeft = '4px solid rgb(154, 192, 250)';
			}
		}
	}
	return (
		<div>
			<div className="nav">
				<div className="title"><span>初探星辰</span>后台管理系统</div>
				<div className="user">
					<img src={chen} className="head" />

				</div>
			</div>

			<header>
				<ul>
					<li className='li' className='firstli' onClick={changeColor}>
						<span className="iconfont icon-shezhi"></span>
						<NavLink  activeClassName='active' exact to='/'>
							<span className="text">用户管理</span>
						</NavLink>
					</li>
					<li className='li' onClick={changeColor}>
						<span className="iconfont icon-yonghu"></span>
						<NavLink activeClassName='active' to='/comment'>
							<span className="text">评论管理</span>
						</NavLink>
					</li>
					<li className='li' onClick={changeColor}>
						<span className="iconfont icon-wendang"></span>
						<NavLink activeClassName='active' to='/feedback'>
							<span className="text">反馈管理</span>
						</NavLink>
					</li>
					<li className='li' onClick={changeColor}>
						<span className="iconfont icon-fankui"></span>
						<NavLink activeClassName='active' to='/source'>
							<span className="text">素材管理</span>
						</NavLink>
					</li>
				</ul>
			</header>
			<div className="block"></div>
		</div>
	)
}

export default Header
